//这是排版管理视图，用于管理系统用户的工作排班。<template>
    <div>
      <el-button type="primary" @click="openAddDialog">添加排班</el-button>
      <el-table :data="schedules" style="width: 100%">
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="employee.name" label="员工姓名"></el-table-column>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="shiftType" label="班次"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteSchedule(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog title="添加排班" :visible.sync="addDialogVisible">
        <el-input v-model="newSchedule.employee.name" placeholder="员工姓名"></el-input>
        <el-date-picker v-model="newSchedule.date" type="date" placeholder="选择日期"></el-date-picker>
        <el-input v-model="newSchedule.shiftType" placeholder="班次"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addSchedule">确定</el-button>
        </span>
      </el-dialog>
  
      <el-dialog title="编辑排班" :visible.sync="editDialogVisible">
        <el-input v-model="editScheduleData.employee.name" placeholder="员工姓名"></el-input>
        <el-date-picker v-model="editScheduleData.date" type="date" placeholder="选择日期"></el-date-picker>
        <el-input v-model="editScheduleData.shiftType" placeholder="班次"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateSchedule">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        schedules: [],
        addDialogVisible: false,
        editDialogVisible: false,
        newSchedule: { employee:{name: ''}, date: '', shiftType: '' },
        editScheduleData: { id: '', employee:{name: ''}, date: '', shiftType: '' }
      };
    },
    created() {
      this.fetchSchedules();
    },
    methods: {
      fetchSchedules() {
        axios.get('/api/schedules').then(response => {
          this.schedules = response.data;
        });
      },
      openAddDialog() {
        this.addDialogVisible = true;
        this.newSchedule = { employee:{name: ''}, date: '', shiftType: '' };
      },
      addSchedule() {
        axios.post('/api/schedules', this.newSchedule).then(() => {
          this.fetchSchedules();
          this.addDialogVisible = false;
        });
      },
      openEditDialog(schedule) {
        this.editDialogVisible = true;
        this.editScheduleData = { ...schedule };
      },
      updateSchedule() {
        axios.put(`/api/schedules/${this.editScheduleData.id}`, this.editScheduleData).then(() => {
          this.fetchSchedules();
          this.editDialogVisible = false;
        });
      },
      deleteSchedule(id) {
        axios.delete(`/api/schedules/${id}`).then(() => {
          this.fetchSchedules();
        });
      }
    }
  };
  </script>
  